<template>
	<view class="page">
		<!-- <image class="bgImg" :src="imgBaseUrl2+'BindBg.png'" mode=""></image> -->
		<image class="bgImg" src="../../../static/images/BindBg.png" mode=""></image>
		<view class="content">
			<view class="title">
				消费助手
			</view>
			<view class="form" v-show="stepNumber==1">
				<!-- <view class="row" @click="selectSchoolShow=true">
					<u-input color="#fff"  placeholder="请选择" v-model="form.school" readonly
					:placeholderStyle="{ color: '#fff'}" placeholderClass="placeholderStyle"  shape="circle">
						<template slot="prefix">
							<image class="icon" :src="imgBaseUrl2+'studentNum.png'" mode="widthFix"></image>
						</template>
						<template slot="suffix">
							<image class="icon" :src="imgBaseUrl2+'refresh.png'" mode="widthFix"></image>
						</template>
					</u-input>	
				</view> -->
				<view class="row">
					<u-input color="#fff" placeholder="请输入手机号" v-model="form.mobile"
					:placeholderStyle="{ color: '#fff'}"   shape="circle">
						<template slot="prefix">
							<u-icon class="icon" name="account" color="#fff" size="20"></u-icon>
						</template>
						<template slot="suffix">
						</template>
					</u-input>	
				</view>
				<view class="row">
					<u-input color="#fff" placeholder="请输入密码" v-model="form.password" 
					type="password" :placeholderStyle="{ color: '#fff'}"   shape="circle">
						<template slot="prefix">
							<u-icon class="icon" name="lock" color="#fff" size="20"></u-icon>
						</template>
						<template slot="suffix">
						</template>
					</u-input>	
				</view>
				<view class="nextBtn" @click="handleLogin">
					登录
				</view>
			</view>
		</view>
		
		<u-picker :show="selectSchoolShow" :columns="schoolList" keyName="departname" 
			@cancel="selectSchoolShow = false"	@confirm="selectSchoolConfirm"></u-picker>
		
	</view>
</template>

<script>
	import {getTsDepartApi,verifyMemberApi,bindApi,sendsmsApi,h5Login} from '@/common/api/commonApi/commonApi.js'
	export default {
		data() {
			return {
				stepNumber : 1,
				form: {
					mobile : '',
					// mobile : uni.getStorageSync('mobile')?uni.getStorageSync('mobile'):'',
					// password : uni.getStorageSync('password')?uni.getStorageSync('password'):'',
					password : '',
				},
				schoolList: [
					[]
				],
				remberInfo: '',
				selectSchoolShow: false,
				sendText: '获取验证码',
				memberStatusDir:{
					'01' : '在职',
					'02' : '在学',
					'03' : '离职',
					'04' : '退养',
					'05' : '退休',
					'06' : '即将离职',
					'09' : '黑名单',
				}
			}
		},
		methods: {
			handleLogin(){
				if(!this.form.mobile) return this.setMessage('请输入手机号')
				if(!this.form.password) return this.setMessage('请输入密码')
				h5Login(this.form).then(res=>{
					// this.replacePage('/pages/index/index')
					uni.setStorageSync('token',res.tokenObj.token)
					uni.setStorageSync('mobile',this.form.mobile)
					uni.setStorageSync('password',this.form.password)
					uni.setStorageSync('selectInfoAccount',res.data)
					if(res.data.abcOpenid=='initial'){
						uni.showModal({
							title: '提示',
							content: '请重新设置密码',
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									uni.reLaunch({
										url:'/pages/componentsC/editPwd/editPwd'
									})
								} else if (res.cancel) {
								}
							}
						});
					}else{
						uni.reLaunch({
							url:'/pages/index/index'
						})
					}
					
				})
			},
			handleSearchUser(){
				if(!this.form.schoolNo) return this.setMessage('请先选择校区')
				this.goPage('/pages/componentsA/searchUser/searchUser',{
					schoolNo : this.form.schoolNo
				})
			},
			handleSendCode(){
				if(!this.form.phone) return this.setMessage('请输入手机号')
				sendsmsApi({
					mainframeNo:  this.form.schoolNo,
					memberId: this.remberInfo.id,
					smsType:  '0',
					iphone: this.form.phone,
				}).then(res=>{
					this.sendText = '重新发送'
					this.setMessage('发送成功！')
				})
			},
			handleBind(){
				this.replacePage('/pages/index/index')
				if(!this.form.phone) return this.setMessage('请输入手机号')
				if(!this.form.code) return this.setMessage('请输入验证码')
				bindApi({
					mainframeNo:  this.form.schoolNo,
					registcode : this.form.code,
					memberId : this.remberInfo.id,
					mobilephone : this.form.phone
				}).then(res=>{
					if(res.msg=='绑定成功'){
						this.goBack()
					}
				})
			},
			selectSchoolConfirm(e){
				console.log(e);
			    this.form.school =`${e.value[0].departname}(${e.value[0].schoolNo})`
				this.form.schoolNo = e.value[0].schoolNo
				this.selectSchoolShow = false
			},
			handleNext(num){
				if(num==1){
					if(!this.form.school) return this.setMessage('请选择校区')
					if(!this.form.studentNum) return this.setMessage('请输入学号')
					verifyMemberApi({
						mainframeNo : this.form.schoolNo,
						memberNo : this.form.studentNum
					}).then(res=>{
						this.stepNumber = 2
						this.remberInfo = res.data
						this.form.post = this.memberStatusDir[this.remberInfo.memberStatus]
						this.form.name = this.remberInfo.memberName
					})
				}else if(num==2){
					this.stepNumber = 3
				}
			},
			getSchoolList(){
				getTsDepartApi().then(res=>{
					this.schoolList[0] = res.tsDepartList
				})
			}
		},
		onLoad() {
			uni.clearStorage()
			if(this.form.mobile && this.form.password){
				this.handleLogin()
			}
			// this.getSchoolList()
		},
		onShow() {
			
			uni.$on('selectUser',(res)=>{
				console.log(res);
				this.form.studentNum = res.memberNo
			})
		},
	}
</script>

<style lang="scss" scoped>

/deep/ .u-input{
	border: 2rpx solid #fff;
	color: #fff !important;
}

/deep/ .placeholderStyle{
	color: #fff;
}

	
.page{
	height: 100vh;
	position: relative;
	.bgImg{
		position: absolute;
		top: 0;
		left: 0;
		height: 100vh;
	}
	.content{
		position: relative;
		z-index: 10;
		padding-top: 260rpx;
		color: #fff;
		@include flexColCenter;
		.title{
			font-size: 34rpx;
			margin-bottom: 100rpx;
		}
		.form{
			@include animation();
			.row{
				height: 84rpx;
				margin-top: 12rpx;
				display: flex;
				.icon{
					width: 32rpx;
					margin: 0 10rpx;
				}
				.sendBtn{
					width: 170rpx;
					color: #4188f0;
					font-size: 24rpx;
					height: 84rpx;
					background-color: #fff;
					@include flexCenter;
					border-radius: 40rpx;
					margin-left: 10rpx;
				}
			}
			.tips{
				text-align: right;
				margin-top: 24rpx;
			}
			.nextBtn{
				width: 514rpx;
				height: 80rpx;
				color: #4188f0;
				border-radius: 40rpx;
				text-align: center;
				background-color: #fff;
				line-height: 80rpx;
				font-size: 34rpx;
				margin-top: 40rpx;
			}
			.btnRow{
				display: flex;
				.btn{
					width: 240rpx;
					height: 80rpx;
					color: #4188f0;
					border-radius: 40rpx;
					text-align: center;
					background-color: #fff;
					line-height: 80rpx;
					font-size: 34rpx;
					margin-top: 40rpx;
					margin-right: 25rpx;
					&:nth-child(2){
						margin-right: 0;
					}
				}
				
			}
		}
		
	}
}
</style>
